<!-- 基本信息 -->
<script lang="tsx" setup>
import type { FormInstance, FormRules } from "element-plus";
import { ElDatePicker, ElSelectV2 } from "element-plus";
import { useUserStore } from "@/stores/user";

import { ECONOMIC_TYPE_OPTIONS, INDUSTRY_OPTIONS } from "@/config/enum-map";
import type { components } from "@/genapi/wh";
import { whManagerBsTbEnterpriseSaveOrUpdateUsingPost } from "@/genapi/wh";
import { useCompanyStore } from "@/stores/company";
import type { UploadProps, UploadUserFile } from "element-plus";
import { ref } from "vue";

defineOptions({ name: "Basic" });

const companyStore = useCompanyStore();

const userStore = useUserStore();

const data = ref<components["schemas"]["TbEnterpriseDTO"]>({});

watchEffect(() => {
	data.value = JSON.parse(JSON.stringify(companyStore.companyInfo ?? {}));
});
let fileIdList = ref<UploadUserFile[]>([]);
onMounted(async() => {
	companyStore.refresh();
  companyStore.refresh().then(res => {
    console.log(res)
    fileIdList.value = res.fileIdList
  })
});

const expireDate = computed({
	get() {
		const { expireDateStart, expireDateEnd } = data.value;
		const res: string[] = [];
		expireDateStart && res.push(dayjs(expireDateStart).format("YYYY-MM-DD"));
		expireDateEnd && res.push(dayjs(expireDateEnd).format("YYYY-MM-DD"));
		return res;
	},
	set(val) {
		data.value.expireDateStart = val?.[0];
		data.value.expireDateEnd = val?.[1];
	},
});

const rules: FormRules = {
	name: [{ required: true, message: "请输入企业名称", trigger: "blur" }],
	legalPerson: [{ required: true, message: "请输入法人代表", trigger: "blur" }],
	establishmentDate: [
		{ required: true, message: "请选择成立日期", trigger: "blur" },
	],
	socialCode: [
		{ required: true, message: "请输入统一社会信用代码", trigger: "blur" },
	],
	safeProductAuthno: [
		{ required: true, message: "请输入安全生产许可编号", trigger: "blur" },
	],
	expireDate: [
		{
			required: true,
			message: "请选择有效期限",
			trigger: "blur",
			validator: () => expireDate.value.length === 2,
		},
	],
};
const isRequired = (prop: string) => {
	const rule = rules[prop];
	return Array.isArray(rule)
		? rule.some((item) => !!item.required)
		: !!rule?.required;
};

const componentList = {
	name: {
		label: () => "企业名称",
		rule: () => rules.name,
		component: () => <ElInput v-model={data.value.name} />,
	},
	legalPerson: {
		label: () => "法人代表",
		component: () => <ElInput v-model={data.value.legalPerson} />,
	},
	establishmentDate: {
		label: () => "成立日期",
		component: () => (
			<ElDatePicker
				valueFormat="YYYY-MM-DD"
				class="100%!"
				v-model={data.value.establishmentDate}
			/>
		),
	},
	industry: {
		label: () => "所属行业",
		component: () => (
			<ElSelectV2 options={INDUSTRY_OPTIONS} v-model={data.value.industry} />
		),
	},
	socialCode: {
		label: () => "统一社会信用代码",
		component: () => <ElInput v-model={data.value.socialCode} />,
	},
	economicType: {
		label: () => "经济类型",
		component: () => (
			<ElSelectV2
				options={ECONOMIC_TYPE_OPTIONS}
				v-model={data.value.economicType}
			/>
		),
	},
	mainMasterName: {
		label: () => "主要负责人",
		component: () => <ElInput v-model={data.value.mainMasterName} />,
	},
	productAddress: {
		label: () => "生产场所地址",
		component: () => <ElInput v-model={data.value.productAddress} />,
	},
	regionCode: {
		label: () => "行政区划",
		component: () => <ElInput v-model={data.value.regionCode} />,
	},
	safeMasterName: {
		label: () => "安全负责人",
		component: () => <ElInput v-model={data.value.safeMasterName} />,
	},
	mainMasterPhone: {
		label: () => "主要负责人电话",
		component: () => <ElInput v-model={data.value.mainMasterPhone} />,
	},
	workerNum: {
		label: () => "职工人数",
		component: () => <ElInput v-model={data.value.workerNum} />,
	},
	dangerChemicalsNum: {
		label: () => "危险化学品作业人员人数",
		component: () => <ElInput v-model={data.value.dangerChemicalsNum} />,
	},
	safeMasterPhone: {
		label: () => "安全负责人电话",
		component: () => <ElInput v-model={data.value.safeMasterPhone} />,
	},
	employeeNum: {
		label: () => "从业人员人数",
		component: () => <ElInput v-model={data.value.employeeNum} />,
	},
	safeProductAuthno: {
		label: () => "安全生产许可编号",
		component: () => <ElInput v-model={data.value.safeProductAuthno} />,
	},
	specialPersonNum: {
		label: () => "特种作业人员人数",
		component: () => <ElInput v-model={data.value.specialPersonNum} />,
	},
	highlyToxicNum: {
		label: () => "剧毒化学品作业人员人数",
		component: () => <ElInput v-model={data.value.highlyToxicNum} />,
	},
	address: {
		label: () => "企业详细地址",
		component: () => <ElInput v-model={data.value.address} />,
	},
	expireDate: {
		label: () => "有效期限", //expireDateStart
		component: () => (
			<ElDatePicker
				valueFormat="YYYY-MM-DD"
				type="daterange"
				v-model={expireDate.value}
			/>
		),
	},
	natureOfBusiness: {
		label: () => "营业执照经营范围",
		component: () => <ElInput v-model={data.value.natureOfBusiness} />,
	},
};
const formRef = shallowRef<FormInstance>();

const { execute, isLoading } = useAsyncState(
	async () => {
		await formRef.value?.validate();
		data.value.fileIdList = fileIdList.value?.map((item) => item.response.id) ?? [];
		await whManagerBsTbEnterpriseSaveOrUpdateUsingPost({
			data: data.value,
		});
		ElMessage.success("保存成功");
	},
	undefined,
	{ immediate: false },
);

</script>

<template>
	<div flex="~ col" w="100%">
		<el-scrollbar>
			<el-form
				ref="formRef"
				w="100%"
				:rules="rules"
				:model="data"
				:disabled="isLoading"
			>
				<div p="b-12px">工商信息</div>
				<el-descriptions :column="3" border w="100%" class="description-form">
					<el-descriptions-item
						v-for="(item, prop) in componentList"
						:key="prop"
					>
						<template #label>
							<div flex="~ items-center justify-center">
								<span v-if="isRequired(prop)" text="red-6">*</span>
								<component :is="item.label" />
							</div>
						</template>
						<el-form-item m="0!" :prop="prop" w="100%!">
							<component :is="item.component" class="w-100%! flex-1!" />
						</el-form-item>
					</el-descriptions-item>
				</el-descriptions>
				<div p="t-30px b-16px">工商信息</div>
				<FileUpload
					v-model:file-list="fileIdList"
					class="w-100%!"
					list-type="picture-card"
				/>
			</el-form>
		</el-scrollbar>
		<div flex="~ justify-end" p="t-20px">
			<el-button type="primary" :loading="isLoading" @click="execute()"
				>修改</el-button
			>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.description-form {
	--el-border-color: transparent;
	--el-component-size: 44px;

	:deep()
		.el-descriptions__body
		.el-descriptions__table.is-bordered
		.el-descriptions__cell {
		padding: 0;
	}

	:deep().el-form-item__error {
		top: calc(100% - 16px);
		left: 10px;
		line-height: 1;
	}
}
</style>
